<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { CaretRight, CaretBottom, User, Check, Close } from '@element-plus/icons-vue'
  import { CommentNode } from '@/types/comment'

  interface Props {
    comment: CommentNode
    onAudit: (_commentId: string, _status: number) => void
    showAuditButtons?: boolean
    level?: number
    isMainComment?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    showAuditButtons: true,
    level: 0,
    isMainComment: false,
  })

  // 是否展开回复列表
  const showReplies = ref(true)

  // 是否有子评论（回复）
  const hasChildren = computed(() => {
    return props.comment.children && props.comment.children.length > 0
  })

  // 获取状态标签类型和颜色
  const getStatusInfo = (status: number) => {
    switch (status) {
      case 0:
        return { type: 'warning' as const, text: '待审核', color: '#e6a23c' }
      case 1:
        return { type: 'success' as const, text: '已通过', color: '#67c23a' }
      case 2:
        return { type: 'danger' as const, text: '已拒绝', color: '#f56c6c' }
      default:
        return { type: 'info' as const, text: '未知', color: '#909399' }
    }
  }

  // 切换回复列表展开状态
  const toggleReplies = () => {
    showReplies.value = !showReplies.value
  }

  // 处理审核操作
  const handleAudit = (commentId: string, status: number) => {
    props.onAudit(commentId, status)
  }

  // 检查是否有待审核的回复
  const hasPendingReplies = computed(() => {
    if (!props.comment.children) return false
    return props.comment.children.some(child => child.status === 0)
  })
</script>

<template>
  <div class="comment-audit-item">
    <!-- 主评论卡片 -->
    <div
      class="comment-card main-comment"
      :class="{
        'status-pending': comment.status === 0,
        'status-approved': comment.status === 1,
        'status-rejected': comment.status === 2,
      }"
    >
      <!-- 评论头部 -->
      <div class="comment-header">
        <div class="user-info">
          <div class="avatar">
            <el-icon class="user-icon">
              <User />
            </el-icon>
          </div>
          <div class="user-details">
            <div class="name-line">
              <span class="nickname">{{ comment.nickname }}</span>
              <el-tag :type="getStatusInfo(comment.status).type" size="small" effect="dark">
                {{ getStatusInfo(comment.status).text }}
              </el-tag>
            </div>
            <div class="meta">
              <span class="time">{{ comment.createTimeFormat }}</span>
              <span class="ip">{{ comment.ip }}</span>
              <span class="email">{{ comment.email }}</span>
            </div>
          </div>
        </div>

        <!-- 审核操作按钮 -->
        <div v-if="showAuditButtons" class="comment-actions">
          <template v-if="comment.status === 0">
            <el-button type="success" size="small" @click="handleAudit(comment.id, 1)">
              <el-icon><Check /></el-icon>
              通过
            </el-button>
            <el-button type="danger" size="small" @click="handleAudit(comment.id, 2)">
              <el-icon><Close /></el-icon>
              拒绝
            </el-button>
          </template>
          <template v-else-if="comment.status === 1">
            <el-button type="danger" size="small" @click="handleAudit(comment.id, 2)">
              <el-icon><Close /></el-icon>
              拒绝
            </el-button>
          </template>
          <template v-else-if="comment.status === 2">
            <el-button type="success" size="small" @click="handleAudit(comment.id, 1)">
              <el-icon><Check /></el-icon>
              通过
            </el-button>
          </template>
        </div>
      </div>

      <!-- 评论内容 -->
      <div class="comment-content">
        <div class="content-text">{{ comment.content }}</div>

        <!-- 博客标题 -->
        <div v-if="comment.blogTitle" class="blog-title">
          <span class="blog-label">文章：</span>
          <span class="blog-name">{{ comment.blogTitle }}</span>
        </div>
      </div>

      <!-- 回复区域 -->
      <div v-if="hasChildren" class="replies-section">
        <div class="replies-header">
          <button class="collapse-btn" @click="toggleReplies">
            <el-icon :size="14">
              <CaretRight v-if="!showReplies" />
              <CaretBottom v-else />
            </el-icon>
            <span class="replies-count">{{ comment.children?.length }} 条回复</span>
            <el-tag v-if="hasPendingReplies" type="warning" size="small" class="pending-hint">
              有待审核
            </el-tag>
          </button>
        </div>

        <!-- 回复列表 -->
        <div v-if="showReplies" class="replies-list">
          <div
            v-for="reply in comment.children"
            :key="reply.id"
            class="reply-item"
            :class="{
              'status-pending': reply.status === 0,
              'status-approved': reply.status === 1,
              'status-rejected': reply.status === 2,
            }"
          >
            <div class="reply-header">
              <div class="reply-user">
                <span class="reply-nickname">{{ reply.nickname }}</span>
                <span v-if="reply.replyToNickname" class="reply-to">
                  回复 @{{ reply.replyToNickname }}
                </span>
                <el-tag :type="getStatusInfo(reply.status).type" size="small" effect="dark">
                  {{ getStatusInfo(reply.status).text }}
                </el-tag>
              </div>

              <!-- 回复审核操作 -->
              <div v-if="showAuditButtons" class="reply-actions">
                <template v-if="reply.status === 0">
                  <el-button type="success" size="small" @click="handleAudit(reply.id, 1)">
                    <el-icon><Check /></el-icon>
                    通过
                  </el-button>
                  <el-button type="danger" size="small" @click="handleAudit(reply.id, 2)">
                    <el-icon><Close /></el-icon>
                    拒绝
                  </el-button>
                </template>
                <template v-else-if="reply.status === 1">
                  <el-button type="danger" size="small" @click="handleAudit(reply.id, 2)">
                    <el-icon><Close /></el-icon>
                    拒绝
                  </el-button>
                </template>
                <template v-else-if="reply.status === 2">
                  <el-button type="success" size="small" @click="handleAudit(reply.id, 1)">
                    <el-icon><Check /></el-icon>
                    通过
                  </el-button>
                </template>
              </div>
            </div>

            <div class="reply-content">{{ reply.content }}</div>

            <div class="reply-meta">
              <span class="reply-time">{{ reply.createTimeFormat }}</span>
              <span class="reply-ip">{{ reply.ip }}</span>
              <span class="reply-email">{{ reply.email }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .comment-audit-item {
    margin-bottom: 24px;
  }

  .comment-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e4e7ed;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
  }

  .comment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
  }

  .comment-card.status-pending::before {
    background: linear-gradient(90deg, #e6a23c 0%, #f4d03f 100%);
  }

  .comment-card.status-approved::before {
    background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
  }

  .comment-card.status-rejected::before {
    background: linear-gradient(90deg, #f56c6c 0%, #f78989 100%);
  }

  .comment-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }

  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 0 20px;
    margin-bottom: 16px;
  }

  .user-info {
    display: flex;
    gap: 16px;
    flex: 1;
  }

  .avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e4e7ed;
    transition: all 0.3s ease;
  }

  .comment-card:hover .avatar {
    border-color: #409eff;
  }

  .user-icon {
    color: #909399;
    font-size: 20px;
  }

  .user-details {
    flex: 1;
    min-width: 0;
  }

  .name-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .nickname {
    font-weight: 600;
    color: #303133;
    font-size: 16px;
  }

  .meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #909399;
    font-size: 13px;
  }

  .time {
    font-weight: 500;
  }

  .comment-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 16px;
  }

  .comment-actions .el-button {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .comment-actions .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .comment-content {
    padding: 0 20px 16px 20px;
  }

  .content-text {
    color: #606266;
    line-height: 1.7;
    margin-bottom: 12px;
    font-size: 15px;
    word-break: break-word;
    white-space: pre-wrap;
  }

  .blog-title {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #409eff;
    font-size: 13px;
  }

  .blog-label {
    color: #909399;
    font-weight: 500;
  }

  .blog-name {
    color: #409eff;
    font-weight: 600;
  }

  .replies-section {
    margin-top: 16px;
    border-top: 1px solid #f0f2f5;
  }

  .replies-header {
    padding: 16px 20px 0 20px;
  }

  .collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s;
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }

  .collapse-btn:hover {
    background: #f0f2f5;
  }

  .replies-count {
    margin-right: 8px;
  }

  .pending-hint {
    font-size: 11px;
    height: 20px;
    line-height: 18px;
    padding: 0 8px;
  }

  .replies-list {
    padding: 12px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .reply-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #f0f2f5;
    transition: all 0.3s ease;
    position: relative;
  }

  .reply-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .reply-item.status-pending::before {
    background: #e6a23c;
    opacity: 1;
  }

  .reply-item.status-approved::before {
    background: #67c23a;
    opacity: 1;
  }

  .reply-item.status-rejected::before {
    background: #f56c6c;
    opacity: 1;
  }

  .reply-item:hover {
    background: rgba(64, 158, 255, 0.02);
    border-color: #409eff;
    transform: translateX(4px);
  }

  .reply-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .reply-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .reply-nickname {
    font-weight: 600;
    color: #303133;
    font-size: 14px;
  }

  .reply-to {
    color: #409eff;
    font-size: 13px;
    font-weight: 500;
  }

  .reply-actions {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .reply-actions .el-button {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 16px;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .reply-actions .el-button:hover {
    transform: translateY(-1px);
  }

  .reply-content {
    color: #606266;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    word-break: break-word;
    white-space: pre-wrap;
  }

  .reply-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #909399;
    font-size: 12px;
    font-weight: 500;
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .comment-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 16px 0 16px;
    }

    .comment-content {
      padding: 0 16px 12px 16px;
    }

    .user-info {
      gap: 12px;
    }

    .comment-actions {
      margin-left: 0;
      align-self: flex-start;
    }

    .replies-header {
      padding: 12px 16px 0 16px;
    }

    .replies-list {
      padding: 8px 16px 16px 16px;
    }

    .reply-item {
      padding: 12px;
    }

    .reply-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .reply-actions {
      align-self: flex-start;
    }
  }
</style>
